<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="../node_modules/three/build/three.js"></script>
    <script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
    <script src="../node_modules/three/examples/js/libs/dat.gui.min.js"></script>
    <script src="../node_modules/chroma-js/chroma.js"></script>
    <script src="../Physijs/physi.js"></script>
    <style>
        html,
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <script>

        var scale = chroma.scale(['yellow', 'red']);

        Physijs.scripts.worker = '../Physijs/physijs_worker.js';
        Physijs.scripts.ammo = '../Physijs/examples/js/ammo.js';

        var renderer, scene, camera, stats, light, animate;

        function init() {

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);

            renderer.setClearColor(0x222222);
            document.body.appendChild(renderer.domElement);

            stats = new Stats();
            document.body.appendChild(stats.domElement);

            scene = new Physijs.Scene;
            scene.setGravity(new THREE.Vector3(0, -50, 0));

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            camera.position.set(50, 30, 50);
            camera.lookAt(new THREE.Vector3(10, 0, 10));

            light = new THREE.SpotLight(0xffffff);
            light.position.set(20, 100, 50);
            scene.add(light);

            createGround();

            requestAnimationFrame(animate);

            var stones = [];

            var points = getPoints();

            points.forEach(value => {

                var stoneGeometry = new THREE.BoxGeometry(0.6, 4, 2);

                var stone = new Physijs.BoxMesh(stoneGeometry, Physijs.createMaterial(new THREE.MeshPhongMaterial({
                    color: scale(Math.random()).hex(), transparent: true, opacity: 0.8
                })));

                stone.position.copy(value);
                stone.lookAt(scene.position);
                stone.__dirtyRotation = true;
                stone.position.y = 3.5;

                scene.add(stone);
                stones.push(stone);

            })

            stones[0].rotation.x = 0.2;
            stones[0].__dirtyRotation = true;


        }

        function getPoints() {

            var points = [];

            var r = 27;
            var cX = 0;
            var cY = 0;

            var circleOffset = 0;

            for (var i = 0; i < 1000; i += 6 + circleOffset) {

                circleOffset = 4.5 * (i / 360);

                var x = (r / 1440) * (1440 - i) * Math.cos(i * (Math.PI / 180)) + cX;
                var z = (r / 1440) * (1440 - i) * Math.sin(i * (Math.PI / 180)) + cY;

                var y = 0;

                points.push(new THREE.Vector3(x, y, z));

            }

            return points;

        }

        animate = function animate() {

            requestAnimationFrame(animate);
            renderer.render(scene, camera);

            stats.update();

            scene.simulate(undefined, 1);

        }

        // 创建地面
        function createGround() {

            var texture = new THREE.TextureLoader().load('../../resources/wood-2.jpg');

            var material = new THREE.MeshPhongMaterial({ map: texture });

            var ground_material = Physijs.createMaterial(material, 0.9, 0.3);

            var ground = new Physijs.BoxMesh(new THREE.BoxGeometry(60, 1, 60), ground_material, 0);

            var borderLeft = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 3, 60), ground_material, 0);
            borderLeft.position.x = -31;
            borderLeft.position.y = 2;
            ground.add(borderLeft);

            var borderRight = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 3, 60), ground_material, 0);
            borderRight.position.x = 31;
            borderRight.position.y = 2;
            ground.add(borderRight);

            var borderBottom = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 3, 2), ground_material, 0);
            borderBottom.position.z = 30;
            borderBottom.position.y = 2;
            ground.add(borderBottom);

            var borderTop = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 3, 2), ground_material, 0);
            borderTop.position.z = -30;
            borderTop.position.y = 2;
            ground.add(borderTop);

            scene.add(ground);

        }

        init();


    </script>
</body>

</html>